﻿<!DOCTYPE html>

<html>
<head>
    <title>Test</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="{{baseUrl}}/lib/bootstrap.min.css" />
    <link rel="stylesheet" href="{{baseUrl}}/lib/all.min.css" />
    <link rel="stylesheet" href="{{baseUrl}}/lib/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="{{baseUrl}}/lib/bootstrap-select.min.css" />

    <link rel="stylesheet" href="{{baseUrl}}/css/wrf-domain-wizard.css?{{timestamp}}" />

    <link rel="icon" href="{{baseUrl}}/img/globe_32x32.png" />
</head>
<body>

    <div class="container">
        <h2>Test Page</h2>
        <div class="">
            <div>Message Box Dialog</div>
            <div>
                <button type="button" class="btn btn-danger" onclick="showError()">Show Error</button>
                <button type="button" class="btn btn-danger" onclick="throwError()">Throw Error</button>
                <button type="button" class="btn btn-danger" onclick="scriptError()">Script Error</button>
            </div>
        </div>
    </div>

    <hr />

    <div class="container">
        <h2>Datetime Picker</h2>
        <div>
            <div class="form-group">
                <label for="datetime-input">Input (UTC)</label>
                <input type="text" class="form-control" id="datetime-input">
            </div>
            <div class="form-group">
                <label for="datetime-output">Output (UTC)</label>
                <input type="text" class="form-control" id="datetime-output">
            </div>
        </div>
        <div class="">
            <div class="form-group">
                <label for="datetimpicker-test">Local Date-Time:</label>
                <div class="input-group date" id="date-time-local">
                    <input type="text" class="form-control" required="">
                    <select class="form-control timezone"></select>
                    <div class="input-group-addon input-group-append">
                        <div class="input-group-text">
                            <i class="far fa-calendar-alt"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="datetimpicker-test">UTC Date-Time:</label>
                <div class="input-group date" id="date-time-utc">
                    <input type="text" class="form-control" required="">
                    <select class="form-control timezone"></select>
                    <div class="input-group-addon input-group-append">
                        <div class="input-group-text">
                            <i class="far fa-calendar-alt"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr />

    {{dialog.message-box}}

    <script src="{{baseUrl}}/lib/jquery.min.js"></script>
    <script src="{{baseUrl}}/lib/bootstrap.bundle.min.js"></script>
    <script src="https://spin.js.org/spin.umd.js"></script>
    <script src="{{baseUrl}}/lib/immediate.min.js"></script>
    <script src="{{baseUrl}}/lib/proj4.js"></script>
    <script src="{{baseUrl}}/lib/leaflet.js"></script>
    <script src="{{baseUrl}}/lib/leaflet.spin.min.js"></script>
    <script src="{{baseUrl}}/lib/leaflet-sidebar.min.js"></script>
    <script src="{{baseUrl}}/lib/leaflet-providers.js"></script>
    <script src="{{baseUrl}}/lib/Blob.js"></script>
    <script src="{{baseUrl}}/lib/FileSaver.min.js"></script>
    <script src="{{baseUrl}}/lib/html-to-image.js"></script>
    <script src="{{baseUrl}}/lib/leaflet.textpath.js"></script>
    <script src="{{baseUrl}}/lib/moment.min.js"></script>
    <script src="{{baseUrl}}/lib/moment-timezone-with-data.min.js"></script>
    <script src="{{baseUrl}}/lib/bootstrap-datetimepicker.min.js"></script>
    <script src="{{baseUrl}}/lib/bootstrap-select.min.js"></script>

    <script src="{{baseUrl}}/js/wrf-domain-wizard.js"></script>

    <script>

        function showError() {
            WRF.errorMessageBox('Error Message', 'This is a text error message');
        }

        WRF.enableGlobalErrorHandler();
        
        function throwError() {
            throw new Error('This is a script error');
        }

        function scriptError() {
            const o = {};
            let x = o.test.test + 10;
        }
    </script>

    <script>
        const namelist = {
            share: {
                start_date: '2024-05-01_03:00:00',
                end_date: '2024-05-01_09:00:00'
            }
        };

        document.getElementById('datetime-input').value = namelist.share.start_date;
        document.getElementById('datetime-output').value = namelist.share.start_date;

        var dtLocal = new WRF.NamelistDateTimePicker(
            document.getElementById('date-time-local'),
            {
                valueUtc: namelist.share.start_date,
                onChange: (e) => {
                    document.getElementById('datetime-output').value = e.sender.formatUtc();
                }
            }
        );

        let timeZoneSelect = dtLocal.widget.querySelector('select');
        WRF.appendTimeZoneSelectOptions(timeZoneSelect, dtLocal.displayTimeZone);
        timeZoneSelect.addEventListener('change', (e) => {
            dtLocal.displayTimeZone = e.currentTarget.value;
        });

        var dtUtc = new WRF.NamelistDateTimePicker(
            document.getElementById('date-time-utc'),
            {
                valueUtc: namelist.share.start_date,
                displayTimeZone: 'UTC'
            }
        );

        timeZoneSelect = dtUtc.widget.querySelector('select');
        WRF.appendTimeZoneSelectOptions(timeZoneSelect, dtUtc.displayTimeZone);
        timeZoneSelect.addEventListener('change', (e) => {
            dtUtc.displayTimeZone = e.currentTarget.value;
        });

    </script>

</body>
</html>